<template>
  <view>
    <swiper class="swiper" circular :indicator-dots="true">
      <swiper-item
        v-for="(photo, index) in goods.photos"
        :key="photo"
        @tap="onSwipperItemTap(index)"
      >
        <view class="h-100">
          <image :src="photo" mode="scaleToFill" class="h-100" />
        </view>
      </swiper-item>
    </swiper>
    <view class="p-2 border-bottom bg-white">
      <view class="a-center">
        <text class="font-theme-color font-md">秒杀价￥1499</text>
        <text class="ml-2 font-sm text-grey line-through">原价￥1999</text>
      </view>
      <view class="text-dark font-md"> 飞天茅台999999999999 </view>
      <view class="mt-2">
        <uni-tag
          v-for="tag in goods.tag"
          class="mr-2"
          :key="tag"
          :inverted="true"
          :text="tag"
        ></uni-tag>
      </view>
      <view class="p-2 bg-white mt-2"> 全场包邮， 七天无理由退货 </view>
      <view class="mt-2 bg-white" style="padding-bottom: 100rpx">
        <view class="font-md text-dark pd-2 mb-2"> 商品详情 </view>
        <uv-parse
          :content="goods.detail"
          :selectable="true"
          :tagStyle="{ image: 'display:block;width:100%;height:auto;' }"
        >
        </uv-parse>
      </view>
      <view class="position-fixed left-0 right-0 bottom-0">
        <uni-goods-nav
          style="margin-top: 20px"
          :fill="true"
          :options="options"
          :button-group="customButtonGroup"
          @click="onGoodsNavOptionsClick"
          @buttonClick="onGoodsNavButtonClick"
        />
      </view>
    </view>
	<uni-popup
		ref="popup"
		type="bottom"
		
	>
		<scroll-view scroll-y style="height: 700rpx; background-color: white;">
			<view class="px-2 py-1 text-right p-2 border-bottom">
				<uni-icons
					type="closeempty"
					@tap="onClosePopup"
					size="20"
				/>
			</view>
			<uni-list>
				<uni-list-item
					showArrow
					to="/pages/address/address?from=seckill"
					:show-extra-icon="true"
					:extra-icon="{
						type: 'location',
						size: '20',
					}"
					:title="currentAddress"
					note=""
				>
					
				</uni-list-item>
			</uni-list>
			<view class="d-flex p-2">
				<view style="width: 176rpx; height: 175rpx;">
					<image
						:src="goods.photos[0]"
						mode="scaleToFill"
						class="w-100 h-100"
					/>
				</view>
				<view class="flex-1 ml-2 d-flex flex-column j-sb">
					<view class="font-md text-dark">
					飞天茅台
					<uni-number-box :min="1" :max="9"></uni-number-box>
				</view>
				</view>
				
			</view>
		</scroll-view>
		<view class="position-fixed left-0 right-0 bottom-0">
			<button type="warn" class="rounded-0 border-0">
				立即抢购￥1999
			</button>			
		</view>
	</uni-popup>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue";
import {onLoad} from '@dcloudio/uni-app'

const popup = ref();
const currentAddress = ref('张三，188999000， 北京市昌平区');
let goods = reactive({
  id: 1,
  name: "飞天茅台",
  price: 100,
  sale: 100,
  sale_price: 100,
  sale_count: 100,
  sale_time: "2020-01-01",
  sale_end_time: "2020-01-01",
  sale_start_time: "2020-01-01",
  tag: ["原装正品", "假一罚十", "历史最低", "正品行货"],
  photos: [
    "/static/product/goods1.jpg",
    "/static/product/goods2.jpg",
    "/static/product/goods3.jpg",
  ],
  detail: `
			尊贵的商品详情
			<img src="/static/product/goods1.jpg" />
			<img src="/static/product/goods2.jpg" />
			<img src="/static/product/goods3.jpg" />

		`,
})
const onSwipperItemTap = (index) => {
  console.log(index);
  uni.previewImage({
    urls: goods.photos,
    current: index,
    loop: true,
  });
};
let customButtonGroup = [
  {
    text: "立即抢购",
    backgroundColor: "red",
    color: "#fff",
  },
];
let options = [
  {
    icon: "chat",
    text: "客服",
  },
];
onLoad(() => {
  uni.$on("choose-address", (data) => {
	const address = data.address
	currentAddress.value = address.realname + "," + address.telephone +"," + address.region + address.detail
	console.log(currentAddress.value)
})
});
const onGoodsNavOptionsClick = (e) => {
  console.log("eee", e);
};
const onGoodsNavButtonClick = (e) => {
  console.log(e);
  popup.value.open();
};
const onClosePopup = () => {
  popup.value.close();
};
</script>

<style scoped lang="scss">
.swiper {
  width: 100%;
  height: 750rpx;
}
</style>
